<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一行不同列布局</title>
    <style>
        body,ul {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        /* 一行两列 */
        .box {
            width: 800px;
            margin: 0 auto;
        }
        .top_left {
            float: left;
            width: 600px;
            height: 300px;
            background-color: rgb(231, 76, 102);
        }
        .top_right {
            float: right;
            width: 190px;
            height: 300px;
            background-color: rgb(84, 84, 141);
        }
        .clear {
            clear:both
        }

        /* 一行三列 */
        .midden {
            margin-top: 20px;
        }
        .midden_left {
            width: 250px;
            height: 300px;
            background-color: skyblue;
            float: left;
        }
        .midden_mindden {
            width: 250px;
            height: 300px;
            background-color: green;
            float: left;
            /* 重点 */
            margin-left: 23px;  
        }
        .midden_right {
            width: 250px;
            height: 300px;
            background-color: rgb(201, 147, 197);
            /* 重点 */
            float:right;
        }
        .clearfix::after {
            content: " ";
            display: block;
            clear: both;
        }

        /* 一行多列 */
        .bottom {
            margin-top: 20px;
        }
        .bottom ul li {
            float: left;
            width: 150px;
            height: 140px;
            /* 重点 */
            margin: 5px;
            background-color: rgb(120, 131, 180);
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 一行两列 -->
        <div class="top">
        <div class="top_left"></div>
        <div class="top_right"></div>
        <div class="clear"></div>
        </div>

        <!-- 一行三列 -->
        <div class="midden clearfix">
            <div class="midden_left"></div>
            <div class="midden_mindden"></div>
            <div class="midden_right"></div>
        </div>

        <!-- 一行多列 -->
        <div class="bottom">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>